<template>
	<view>
		<!-- 定位 -->
			<!-- //<view class="addr"><view class="icon location"></view>{{city}}</view> -->
		 <van-search class="material-header-search" v-model="value" placeholder="搜索门店名称" background="none"/>
			
			<swiper indicator-dots circular autoplay>
				<swiper-item v-for="(image, index) in images" :key="image.index">
					<image :src="image" mode="" ></image>
				</swiper-item>
		
			</swiper>
				<view style="text-align: center;"><van-icon name="apps-o" size="20" @click="toCategory" style="text-align: center;"/></view>
			<van-tabs @click="onClick">
				<van-tab  v-for="(item,index) in categorys" :key="index" :title="item.categoryName" :name="item.categoryId"></van-tab>			
			</van-tabs>
		<!--    <view :class="{'my-tabs':true,'space-between':formatBe}" >
		    	<view  v-for="(item,index) in categorys" :key="index" :class="{'tab-item':true,'active':activeIndex==index}" @tap="tap(index,item.categoryId)">
		    		{{item.categoryName}}
		    	</view>s
				<van-icon name="apps-o" size="1000" @click="toCategory"/>
		    </view> -->
				<view  class="material-list-grid"  style="width: 45.5%;" v-for="(product,index) in productCategory" :key="product.index" @click="toDetails(product.productId)">
					<image style="width: 150px;height: 150px;" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
					<view  class="material-list-grid-content">
						<view align="left" style="background-color: gainsboro;border-radius: 1rem">
								<!-- <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/> -->
								<view style="padding: 0;height: 1.5rem;line-height: 1.55rem;overflow: hidden;margin: 0px;">{{product.categoryName}}石家庄直营</view>
						</view>
						<view align="left">
								<view>{{product.productName}}</view>
								<view>{{product.shopsName}}</view>
						</view>
						<view align="left">
							<view>
								<text style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</text>
								<text style="font-weight: bolder;font-size: 1rem">￥{{product.price}}</text>
							</view>													          
						</view>
				</view>
				</view>
	</view>
</template>

<script>
	 import {getCateGoryList,selectProductByCateGoryType,getProductByCateGory,selectProductByCateGoryList} from '@/api/customer/local.js'
	export default {
		data() {
			return {
				 value: '',
				activeIndex:0,//默认索引
				 img: "https://img.yzcdn.cn/vant/cat.jpeg",
				  // proCategory: [],
				  productCategory: [],
				  van: 'van-icon',
				  city:'北京',
				  active:2,
				  images: [
				              '../../static/logo.png',
				              '../../static/logo.png',
				            ],
					categorys:[
				
					],
					categoryType:0,
					id:""
			}
		},
		
		created() {
			this.getList()
			
		
		},
		methods: {
			
			 toCategory(){
				 console.log(11111)
				 uni.navigateTo({
				 	url:'/pages/index_category/index_category?typeid=0'
				 })			        
			   },
			   toDetails(id){
				   console.log(id)
					uni.navigateTo({
						url:"/pages/index_commodity_details/index_commodity_details?commodityId="+id
					})
			   },
			// onClick(name, title) {     //tab切换
			//        //console.log(name.detail.name)
			// 	   getProductByCateGory(35).then((res) => {
			// 		   console.log(res.data.data)					  
			// 			this.productCategory = res.data.data;
			// 	     });
				
			//  },
			 onClick(name){

			 	console.log(name)
				getProductByCateGory(name).then((res) => {
					console.log(res.data.data)					  
					this.productCategory = res.data.data;
				  });
			 },

			 		
		
			gitList(id){				
			   getProductByCateGory(id).then((res) => {
			   	console.log(res.data.data)					  
			   	this.productCategory = res.data.data;
			     });
			},
			// 查询建房主材类别列表
			      getList(){
					getCateGoryList("0").then(res=>{
						this.categorys = res.data.data
						this.id = res.data.data[0].categoryId
						this.gitList(this.id)
						console.log(this.categorys)
					})
			      },
			
		}
	}
</script>

<style lang="scss">
	swiper image{
		width: 100%;
	}
.material-list{
    position: relative;
    text-align: left;
  }
  .material-list-grid{
    display: inline-block;
    padding: 1.5rem;
  }
  .material-list-grid P,span{
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
  .my-tabs {
  	height: 88upx;
  	font-size: 28upx;
  	display: flex;
  	justify-content: space-around;
  	box-sizing: border-box;
  	border-top: 2upx solid #dddddd;
  	border-bottom: 2upx solid #dddddd;
  	min-width: 100%;
  	overflow-x: auto;
  	
  	.tab-item{
  		line-height: 48upx;
  		padding: 20upx;
  		min-width: 100upx;
  		text-align: center;
  	}
  	.tab-item.active{
  		position: relative;
  		color: #3682FF;
  	}
  	.tab-item.active::after{
  		content: "";
  		position: absolute;
  		bottom: 0;
  		left:50%;
  		transform: translateX(-50%);
  		width: 100%;
  		border-bottom: 4upx solid #3682FF;
  		animation: test ease 1 1.5s;
  	}
  }
  .my-tabs.space-between{
  	justify-content: space-between;
  }
  @keyframes test{
  	0%{width: 100%}
  	50%{width: 150%}
  	100%{width: 100%}
  }
</style>
